<template>
	<view class="content">
		<view class="content-tabs">
			<button @click="activeIndex = 0;" :class="activeIndex == 0 ? 'active' : ''">患者信息</button>
			<button @click="activeIndex = 1;goPage('/pages/referralProcess/referralProcess')" :class="activeIndex == 1 ? 'active' : ''">转诊流程</button>
			<button @click="activeIndex = 2;goPage('/subPackages/pages/chat/main')" :class="activeIndex == 2 ? 'active' : ''">转诊交流记录</button>
			<button @click="activeIndex = 3;goPage('/subPackages/pages/chat/main')" :class="activeIndex == 3 ? 'active' : ''">床位预约信息</button>
		</view>
		<view class="content-item">
			<view class="content-item-title" style="display:flex;">
				<image style="width:108rpx;height:108rpx;border-radius:50%;" src="../../static/logo.png" mode=""></image>
				<view style="margin-left:20rpx;" v-if="Object.keys(detailData).length>0">
					<view style="margin-top:8rpx;">
						{{detailData.patient_name}} <image v-if="detailData.patient_gender_data == 0" src="../../static/images/woman.png" style="display:inline-block;width:32rpx;heigh:32rpx;" mode="widthFix"></image>
					</view>
					<view style="font-size:24rpx;margin-top:6rpx;">
						{{detailData.patient_age}}岁 {{detailData.patient_phone}}
					</view>
				</view>
			</view>
			<view class="content-item-main">
				<p class="content-item-main-p"><text style="color:#8c8c8c;float:left;">转诊编码：</text> <text style="width:calc(100% - 140rpx);display:inline-block;">{{detailData.coded}}</text></p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;float:left;"><text style="opacity: 0;">隐</text>联系人：</text> <text style="width:calc(100% - 140rpx);display:inline-block;">{{detailData.patient_contacts}}</text></p>
			</view>
		</view>
		
		<view class="content-item">
			<view class="content-item-title">
				病历信息
			</view>
			<view class="line-box"></view>
			<view class="content-item-main">
				<p class="content-item-main-p"><text style="color:#8c8c8c;">主要诊断：</text>{{detailData.referral_urgency_data}}</p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;">病情等级：</text> <text>{{
					detailData.referral_urgency_data_text
				}}</text> </p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;">病情概述：</text> {{detailData.referral_disease_desc}}</p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;float:left;">诊疗过程：</text> <text style="width:calc(100% - 140rpx);display:inline-block;">{{detailData.referral_treatment_process}}</text></p>
				<p class="content-item-main-p"><text style="color:#8c8c8c;float:left;">转诊目的：</text> <text style="width:calc(100% - 140rpx);display:inline-block;">{{detailData.referral_reason}}</text></p>
			</view>
		</view>
		
		<view class="content-item">
			<view class="content-item-title">
				检查报告
			</view>
			<view class="line-box"></view>
			<view style="margin-top:20rpx;">
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" :src="detailData.inspection_report_images" mode=""></image>
				<!-- <image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image> -->
			</view>
		</view>
		
		<view class="content-item">
			<view class="content-item-title">
				检验报告
			</view>
			<view class="line-box"></view>
			<view style="margin-top:20rpx;">
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" :src="detailData.inspectd_report_images" mode=""></image>
				<!-- <image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image> -->
			</view>
		</view>
		
		<view class="content-item">
			<view class="content-item-title">
				其他
			</view>
			<view class="line-box"></view>
			<view style="margin-top:20rpx;">
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" :src="detailData.additional_images" mode=""></image>
				<!-- <image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image>
				<image style="width:calc(25% - 8rpx);margin:4rpx;height:150rpx;" src="../../static/logo.png" mode=""></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				activeIndex:0,
				tabbarVal:"",
				detailData:{}
			}
		},
		onLoad(option) {
			console.log(option);
			let that = this;
			let token = "";
			uni.getStorage({
				key:"userInfo",
				success: function (res) {
					console.log(res.data);
					token = JSON.parse(res.data).token;
					console.log(JSON.parse(res.data).token);
					uni.request({
						url:that.$apiUrl+'api/referral/view',
						method:"GET",
						header:{'token':token},
						data:{id:option.id}
					}).then(res=>{
						that.detailData = res[1].data.data || {};
					})
				},
			})
		},
		methods: {
			goPage(path){
				if(path == '/subPackages/pages/chat/main'){
					this.$store.dispatch('checkoutConversation',`GROUP${this.detailData.coded}`)
					console.log(this.detailData.id);
					uni.navigateTo({
						url:"/subPackages/pages/chat/main"
					})
				}else{
					uni.navigateTo({
						url:path+'?id='+this.detailData.id
					})
				}
				
			},
			click1(e){},
			changeTabbar(e){
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	.content {
		min-height:100vh;
		background:#f0f0f0;
		padding-top:1rpx;
	}
	.content-tabs{
		display: flex;
		padding:32rpx 0;
		margin:0 24rpx;
		width:calc(100% - 48rpx);
		overflow-y: auto;
	}
	.content-tabs>button{
		width:160rpx;
		height:56rpx;
		font-size:24rpx;
		background:#fff;
		padding:0;
	}
	.content-tabs>button:not(:first-child){
		margin-left:16rpx;
	}
	.active{
		background:#3c8af3!important;
		color:#fff!important;
	}
	.content-item{
		margin:24rpx;
		padding:32rpx 24rpx;
		background:#fff;
		border-radius:20rpx;
	}
	.content-item-title{
		font-size:32rpx;
	}
	.content-item-main{
		font-size:26rpx;
		margin-top:30rpx;
	}
	.content-item-main .content-item-main-p{
		margin-top:20rpx;
	}
	.content-item-tag{
		font-size:24rpx;
		background:#fdf2dc;
		color:#f3ab3c;
		padding:4rpx;
		border-radius:5rpx;
	}
	.line-box{
		width: 100%;
		height: 1rpx;
		background-color: #f0f0f0;
		margin-top:10rpx;
	}
	
	.content-tabs{
		display: flex;
		padding:32rpx 0 0 0;
		margin:0 24rpx;
		width:calc(100% - 48rpx);
		overflow-y: auto;
	}
	.content-tabs>button:not(:first-child){
		margin-left:16rpx;
	}
	.active{
		background:#3c8af3!important;
		color:#fff!important;
	}
</style>